<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    table {
      border: 1px solid #000;
      border-collapse: collapse;
      margin: 100px auto;
    }
    tr,
    td {
      width: 200px;
      height: 100px;
      text-align: center;
      /* background-color: pink; */
    }
  </style>
  <body>
    <table border="1">
      <thead>
        <tr>
          <th>用户名</th>
          <th>年龄</th>
          <th>性别</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>jack</td>
          <td>18</td>
          <td>男</td>
        </tr>
        <tr>
          <td>jack</td>
          <td>18</td>
          <td>男</td>
        </tr>
      </tbody>
    </table>
    <script>
      /* 
            var arr = [
                        {
                        name: 'Jack',
                        age: 18,
                        gender: '男'
                        },{
                        name: 'Rose',
                        age: 20,
                        gender: '女'
                        },{
                        name: 'Top',
                        age: 22,
                        gender: '男'
                        }
                    ]
         */
      //  对象数组
      var arr = [
        {
          name: "Jack",
          age: 18,
          gender: "男",
        },
        {
          name: "Rose",
          age: 20,
          gender: "女",
        },
        {
          name: "Top",
          age: 22,
          gender: "男",
        },
      ];
      var tobodyEle = document.getElementsByTagName("tbody")[0];
      console.log(tobodyEle);
      // 通过js 来生成table 1.不变的位置 2.动态改变的位置
      // 通过js来修改tbody里的内容
      var trHtml = "";
      for (var i = 0; i < arr.length; i++) {
        if (i % 2 == 0) {
          trHtml += `<tr style="background:azure"><td>${arr[i].name}</td><td>${arr[i].age}</td><td>${arr[i].gender}</td></tr>`;
        } else {
          trHtml += `<tr><td>${arr[i].name}</td><td>${arr[i].age}</td><td>${arr[i].gender}</td></tr>`;
        }
      }
      console.log(trHtml);
      tobodyEle.innerHTML = trHtml;
    </script>
  </body>
</html>
